<template>
  <div class="box">
    <header class="header">
      <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/icons/icon_arrow_left_darkgray.png" alt="" class="back" @click="goBack">
      <div class="searchBox">
        <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/icons/icon_search_lightgray.png" alt="" class="searchImg">
        <input v-model="value" type="text" class="searchInput" id="searchVal" placeholder="请输入关键词" @keydown="keyOnClick">
      </div>
      <button class="gosearch" @click="goSearch">搜索</button>
    </header>
    <div class="content">
      <div class="tuijian">
        <div class="history" v-if="flag">
          <h5>搜索历史<img id="deleteIcon" src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/search/search_trash.png" alt="00" @click="deleteHistory"></h5>
          <div v-for="item of historyList" :key="item.index" @click="itemClick">
            <span class="historyItem">{{ item }}</span>
          </div>
        </div>
        <div class="searchFind" @click="itemClick">
          <h5 class="sfh5">搜索发现</h5>
          <span class="findItem">手机</span>
          <span class="findItem">笔记本电脑</span>
          <span class="findItem">女装女鞋</span>
          <span class="findItem">智能</span>
          <span class="findItem">小米电视</span>
          <span class="findItem">球</span>
          <span class="findItem">外套</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Search, Toast } from 'vant'
Vue.use(NavBar)
Vue.use(Search)
Vue.use(Toast)
export default {
  data () {
    return {
      value: '',
      flag: false,
      historyList: []
    }
  },
  mounted () {
    console.log(JSON.parse(window.localStorage.getItem('searchHistory')))
    const historyArr = JSON.parse(window.localStorage.getItem('searchHistory'))
    this.historyList = historyArr
    if (historyArr) {
      this.flag = true
    } else {
      this.flag = false
    }
  },
  methods: {
    onCancel () {
      Toast('取消')
    },
    goBack () {
      this.$router.go(-1)
    },
    keyOnClick (e) {
      console.log('正在输入')
      const evt = window.event || e
      const code = evt.keyCode || evt.which
      if (code === 13) {
        var searchVal = document.getElementById('searchVal').value
        if (!searchVal.trim()) {
          Toast('搜索内容不能为空')
        } else {
          this.$router.push('/products?value=' + searchVal)
        }
        const historyStr = window.localStorage.getItem('searchHistory')
        if (historyStr) {
          const historyArr = JSON.parse(window.localStorage.getItem('searchHistory'))
          if (historyArr.indexOf(this.value) < 0 && this.value.trim() !== '') {
            historyArr.push(this.value)
          }
          window.localStorage.setItem('searchHistory', JSON.stringify(historyArr))
        } else {
          const historyArr = []
          historyArr.push(this.value)
          window.localStorage.setItem('searchHistory', JSON.stringify(historyArr))
        }
      }
    },
    goSearch () {
      var searchVal = document.getElementById('searchVal').value
      if (!searchVal.trim()) {
        Toast('搜索内容不能为空')
      } else {
        this.$router.push('/products?value=' + searchVal)
      }
      const historyStr = window.localStorage.getItem('searchHistory')
      if (historyStr) {
        const historyArr = JSON.parse(window.localStorage.getItem('searchHistory'))
        if (historyArr.indexOf(this.value) < 0 && this.value.trim() !== '') {
          historyArr.push(this.value)
        }
        window.localStorage.setItem('searchHistory', JSON.stringify(historyArr))
      } else {
        const historyArr = []
        historyArr.push(this.value)
        window.localStorage.setItem('searchHistory', JSON.stringify(historyArr))
      }
    },
    itemClick (evt) {
      var e = evt || window.event
      var target = e.target || e.srcElement
      if (target.nodeName.toUpperCase() === 'SPAN') {
        this.value = target.innerHTML
      }
    },
    deleteHistory () {
      window.localStorage.removeItem('searchHistory')
      this.flag = false
    },
    test () {
      console.log('正在输入')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/lib/reset.scss';
.header {
  background:#f4f4f4;
  .back {
    height:48px;
    float: left;
  }
  .searchBox {
    width:70%;
    background:white;
    height:30px;
    margin:10px 0;
    border-radius: 15px;
    float: left;
    .searchImg {
      width:20px;
      margin:5px 10px;
    }
    .searchInput {
      border:none;
      height:24px;
      margin-top: 3px;
    }
  }
  .gosearch {
    width:50px;
    height:28px;
    border-radius: 15px;
    background:red;
    border:none;
    margin-top: 10px;
    color:white;
    margin-left: 8px;
  }
}
.content {
  background:#f4f4f4;
  @include rect(100%, 100%);
  .tuijian {
    @include rect(100%, 100%);
    background: white;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    .history {
      padding: 30px;
      h5 {
        margin-bottom: 10px;
        text-align: left;
        #deleteIcon {
          float: right;
          width: 28px;
        }
      }
      div {
        .historyItem {
          display:block;
          height:30px;
          font-size: 14px;
          color:black;
          background:#f4f4f4;
          border-radius: 15px;
          line-height: 30px;
          padding:0 8px;
          margin: 6px 20px 6px 0;
          float: left;
        }
      }
    }
    .searchFind {
      clear: both;
      h5 {
        margin-bottom: 10px;
        text-align: left;
      }
      padding: 30px;
      .findItem {
        display:block;
        height:30px;
        font-size: 14px;
        color:black;
        background:#f4f4f4;
        border-radius: 15px;
        line-height: 30px;
        padding:0 8px;
        margin: 6px 20px 6px 0;
        float: left;
      }
    }
  }
}
</style>
